<template>
	<view class="init-page register">
		<set-lang></set-lang>
		<view class="init-swiper-wrap">
			<swiper class="init-swiper" @change="change" :autoplay="false" :duration="300" height="600upx">
				<swiper-item>
					<image class="init-slide-img" src="../../static/img/indexImg/guide1.png" mode="aspectFill"></image>
					<view class="init-slide-text">{{i18n.carousel1}}</view>
				</swiper-item>
				<swiper-item>
					<image class="init-slide-img" src="../../static/img/indexImg/guide2.png" mode="aspectFill"></image>
					<view class="init-slide-text">{{i18n.carousel2}}</view>
				</swiper-item>
				<swiper-item>
					<image class="init-slide-img" src="../../static/img/indexImg/guide3.png" mode="aspectFill"></image>
					<view class="init-slide-text">{{i18n.carousel3}}</view>
				</swiper-item>
			</swiper>
		</view>
		<view class='expf'>
			<navigator url="../login/register" class="experience">{{i18n.experience}}</navigator>
		</view>
	
		<view class="init-docs">
			<view class="init-dosc-item" v-for="(item, index) in 3" :key="index" :class="{'active': currentTab==index}"></view>
		</view>
	</view>
</template>

<script>
	import setLang from '../../components/setLang.vue'
	export default {
		components: {
			setLang
		},
		data() {
			return {
				docs: [0,1,2],
				currentTab:0,
			}
		},
		onShow(){

		},
		onLoad() {
			this.info()
		},
		computed: {
		   i18n(){
		   	  return this.$t('guide');
		   },
		},
		methods: {
			//获取用户信息
			info (){
				uni.setStorageSync('launchFlag',true);
			},
			change (e){
				this.currentTab = e.detail.current
			}
		}
	}
</script>

<style lang="less" scoped>
	.init-page{
		padding-top: calc(var(--status-bar-height) + 240upx);
		background-color: #ffffff;
	}
	.init-slide-img{
		display: flex;
		width: 560upx;
		height: 560upx;
		margin: 0 auto
	}
	.init-slide-text{
		display: block;
		text-align: center;
		margin-top: 0upx;
		font-size: 48upx;
		color:#263238;
		font-weight: bold;
	}
	.init-swiper{
		height: 700upx;
		margin-top: 0;
	}
	.init-docs{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.init-dosc-item{
		width:16upx;
		height:16upx;
		margin: 0 10upx;
		background:var(--txt-gray-color);
		opacity:1;
		border-radius:8px;
		transition: 0.3s ease all;
		&.active{
			width: 46upx;
			background: var(--theme-color);
		}
	}
	.expf{
		text-align: center;
		margin: 80upx 0;
	}
	.experience{
		height: 72upx;
		line-height: 72upx;
		font-size: 32upx;
		color: #ffffff;
		background-color: var(--theme-color);
		border-radius: 36upx;
		padding: 0 60upx;
		display: inline-block;
		font-weight: bold;
	}
	
</style>
